<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slideshow</title>
    <style>
        #centerBox{
            margin: 30px auto;
            background-color: aliceblue;
            width: 590px;
            height: 470px;
            position: relative;
        }
        #centerBox img{
            width: 590px;
        }
        a{
            display: block;
        }
        #left{
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: rgba(225,225,225,0.5);
            left: 0px;
            bottom: 235px;
            text-align: center;
            line-height: 50px;
            background:rgba(225,225,225,0.5) url("icon_najoujkl11/iconfontzhizuobiaozhun023126.png") no-repeat 0px 0px/50px 50px;
        }
        #left:hover{
            background: rgba(225,225,225,0.5) url("icon_sf0oyh4ngy/iconfontzhizuobiaozhun023126.png") no-repeat 0px 0px/50px 50px;;
        }
        #right{
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: rgba(225,225,225,0.5);
            right: 0px;
            bottom: 235px;
            text-align: center;
            line-height: 50px;
            background:rgba(225,225,225,0.5) url("icon_najoujkl11/jiantouyou.png") no-repeat 0px 0px/50px 50px;
        }
        #right:hover{
            background:rgba(225,225,225,0.5) url("icon_sf0oyh4ngy/jiantouyou.png") no-repeat 0px 0px/50px 50px;
        }
    </style>
    <script>
        window.onload = function () {
            var arr = ['img/1a.jpg.webp','img/2.jpg.webp','img/3.jpg.webp','img/4.jpg.webp','img/5.jpg.webp'];
            var left = document.getElementById('left');
            var right = document.getElementById('right');
            var img = document.getElementById('img');
            var current = 0;
            var info = document.getElementById('info');
            info.innerHTML = '一共'+arr.length+'张照片,第'+(current+1)+'张.';
            left.onclick = function () {
                current--;
                if (current === -1){
                    current = arr.length-1;
                }
                img.src = arr[current];
                info.innerHTML = '一共'+arr.length+'张照片,第'+(current+1)+'张.';
            }
            right.onclick = function () {
                current++;
                if (current === arr.length){
                    current = 0;
                }
                img.src = arr[current];
                info.innerHTML = '一共'+arr.length+'张照片,第'+(current+1)+'张.';
            }

        }
    </script>
</head>
<body>
        <p style="text-align: center" id="info">一共5张照片,第1张.</p>
        <div id="centerBox">
            <img id="img" src="img/1a.jpg.webp">
            <a id="left" href="##"></a>
            <a id="right" href="##"></a>
        </div>

</body>
</html>